
{extend name="public/common"}

{block name="style"}
<title>点对点教育VIP学员_测试统计</title>
    <style>
        * {
            box-sizing: border-box;
            font-family: 'Microsoft YaHei';
            -webkit-tap-highlight-color:rgba(0,0,0,0);
        }
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, p, table, th, td, select, option {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        /**/
        .ranging>div>ul>li{
            height:51px;
            border-bottom: 1px solid #e5e5e5;
            padding-left:2px;
        }
        .ranging>div>ul>li>.king{
            width: 31px;
            height:24px;
            float:left;
            margin-top:13px;
        }
        .ranging>div>ul>li>span{
            width: 40px;
            height:24px;
            float:left;
            margin-top:13px;
            line-height: 24px;
            font-size: 20px;
            color:#333;
            text-align: center;
            display:none;
        }
        .ranging>div>ul>li>.userImg{
            width: 30px;
            height:30px;
            float:left;
            margin-top:10px;
            margin-left:10px;
            border-radius: 50%;
        }
        .ranging>div>ul>li>b{
            float:right;
            font-weight: normal;
            color:#666;
            font-size: 14px;
            line-height: 50px;
            white-space: nowrap;
            overflow: hidden;
            width: 70vw;
            text-overflow: ellipsis;
        }
        .ranging>div>ul>li>p{
            float:left;
            line-height: 50px;
            width: 20vw;
            font-size: 14px;
            color:#666;
            text-align: center;
        }
        .div1{
            float:left;
            line-height: 50px;
            width: 40vw;
            font-size: 15px;
            color:#aaa;
            text-align: left;
            margin-left:10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .div2{
            float:left;
            line-height: 50px;
            width: 30vw;
            font-size: 15px;
            color:#aaa;
            text-align: left;
            margin-left:10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .div3{
            float:left;
            line-height: 50px;
            font-size: 15px;
            color:#aaa;
            text-align: left;
            margin-left:10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
      /*  .ranging>div>ul>li:nth-child(-n+3)>b{
            color:#fc4f41;
        }*/
        .ranging>div>ul>li:nth-child(n+4)>span{
            display:block;
        }
        .ranging>div>ul>li:nth-child(n+4)>.king{
            display:none;
        }
        .ranging>div>ul>li:nth-child(1)>.king{
            background: url("__HOME__/images/rank/4.png") no-repeat center center;
            background-size:cover;
        }
        .ranging>div>ul>li:nth-child(2)>.king{
            background: url("__HOME__/images/rank/5.png") no-repeat center center;
            background-size:cover;
        }
        .ranging>div>ul>li:nth-child(3)>.king{
            background: url("__HOME__/images/rank/6.png") no-repeat center center;
            background-size:cover;
        }
        .defaults img {
            width: 16vw;
            position: absolute;
            left: 50%;
            margin-left: -8vw;
            top: 210%;
        }
        .a{
            position: absolute;
            bottom:-1vw;
            left:15vw;
        }
        .sum{
            position: absolute;
            top:4vw;
        }
        .score{
            position: absolute;
            top:4vw;
            left:85vw;
            font-weight:bold;
        }
    </style>
{/block}
{block name="body"}
<div class="scroll"  style="position:absolute; overflow:scroll; -webkit-overflow-scrolling: touch; top:0; left:0; bottom:0; right:0">
<div class="navbar">
    <div class="ranging">
        <!--//周榜-->
        <div  class="listes">
            {empty name="sign"}
            <div class="defaults"><img src="__HOME__/images/common/nomessage.png" alt="暂无消息"> </div>
            {else/}
            <ul>
                {volist name="sign" id="si"}
                <li style="height: 80px;position: relative">
                    <!--前三名头像-->
                    <div class="king sum div1"></div>
                    <!--排名-->
                    <span class="sum">{$i}</span>
                    <!--用户头像-->
                    <img src="{$si.headimgurl}" alt="" class="userImg" style="margin-left:14vw">
                    <p>{$si.name|substr=###,0,3}同学</p>
                    <!--积分-->
                    <div class="div2">{$si.order}</div>
                    <b class="a">{$si.school|get_school}</b>
                    <div class="score div3" style="color: red">{$si.score}</div>
                </li>
                {/volist}
            </ul>
            {/empty}
        </div>
    </div>
    <div class="tip"></div>
    <div class="loading hidden">
        <div class="typing_loader"></div>
    </div>
</div>
    </div>
{/block}
{block name="script"}
<script src="__HOME__/js/jquery-1.12.1.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script src="__HOME__/js/reset.js"></script>
<script>
    var scrollNow = true;//判断下拉请求是否执行中.false为正在请求
    $('title' ).text('点对点教育VIP学员_测试统计');
    $(function(){
        var len = $(".listes").find("ul li").length;
        if(len >=30){
            $('.tip').text('上拉加载更多');
            document.getElementsByClassName("scroll")[0].addEventListener('scroll',handleScroll);
        }else{
            document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
            $('.tip').hide();
        }
    })

    var handleScroll = function() {
        var code = "{$code}";
        var tip = $(".tip");
        var loading = $('.loading');
        var len  = $(".listes").find("ul li").length;
        var el = document.getElementsByClassName("scroll")[0];
        if(el.scrollTop + el.offsetHeight +2 >= el.scrollHeight && scrollNow){
            scrollNow = false;
            tip.show().text('上拉加载更多');
            $.ajax({
                type: 'post',
                url: "{:Url('Scan/more')}",
                data: {
                    length:len,
                    code:code
                },
                beforeSend: function(XMLHttpRequest){
                    tip.hide();
                    loading.toggleClass('hidden');
                },
                success: function (res) {
                    loading.toggleClass('hidden');
                    tip.show();
                    if(res.code == 1){
                        addNews(res);
                        if(res.data.length==30){
                            tip.text('上拉加载更多');
                        }else{
                            tip.text('没有更多了');
                            document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
                        }
                    }else{
                        tip.text('没有更多了');
                        document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
                    }
                    scrollNow = true;
                },error:function(data){

                }
            });
        }
    };
    function addNews(data){
        var html = '';
        var lists = data.data;
        var len = lists.length;
        for(var i = 0; i< len;i++){
            var list = lists[i];
            var rank = parseInt(list.len) + parseInt(i) + parseInt(1);
            html+='<li style="height: 80px;position: relative"><div class="king sum"></div>'+
                    '<span class="sum">'+rank+'</span><img src="'+list.headimgurl+'" alt="" class="userImg" style="margin-left:14vw"><p>'+list.name+'</p><div class="div2">'+list.order+'</div><b class="a">'+list.school+'</b><div class="score div3" style="color: red">'+list.score+'</div></li>';
        }
        $(".listes").find("ul").append(html);
    }
    //关闭分享
    function onBridgeReady() {
        WeixinJSBridge.call('hideOptionMenu');
    }
    if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
    } else {
        onBridgeReady();
    }
</script>
{/block}